<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>箩筐足迹</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<link rel="stylesheet" type="text/css" href="static/css/track.css" />
	<script src="static/js/lk.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*sidebar */
#sidebar{
	position: fixed;
	display: none;
}
#sidebar #top, #sidebar #user, #sidebar #bottom{
	background: #fff;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 2px 1px 5px #888; 
	box-shadow: 2px 1px 5px #888;	
}
#sidebar #top img, #sidebar #bottom img{
	width: 70%;
	height: auto;
	margin: 0 auto;
	display: block;
}
#sidebar #top span,#sidebar #bottom span{
	display: block;
	font-size: 26px;
	color: #777777;
	letter-spacing: 0;
	text-align: center;
	line-height: 1.3;	
	font-family: sans-serif,"microsoft yahei",arial,verdana;
}
#sidebar #user{
	border-radius: 50%;
	-webkit-border-radius: 50%;
	position: relative;
}
#sidebar #user img{
	width:100%;
	height: 100%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
}

#sidebar #user img#addbtn{
	position: absolute;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	
}
#footerbar{
	width:100%;
	position: fixed;
	bottom:0;
	left:0;
	background: #FEFEFE;
	display: none;
	
}
#footerbar p{
	font-size: 30px;
	color: #FFFFFF;
	text-align: center;
	line-height: 2;
	float: right;
	padding: 0;
	margin: 0;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 2px 1px 5px #BFEEC8; /* 老的 Firefox */
	box-shadow: 2px 1px 5px #BFEEC8;
	background: #2ECC49;	
	
}	
</style>
</head>

<body>
	
<div id='map'>
</div>
<div class="alertMeassage">
	
</div>
<div id="sidebar">
	<div id="top">
		<img src="static/img/ico_phone.png" alt="">
		<span>跟拍</span>
		<img src="static/img/ico_share.png" alt="">
		<span>分享</span>
	</div>
	<div id="user">
		<img src="static/img/user.jpg" alt="" id="userIcon" />
		<img src="static/img/ico_add.png" alt="" id="addbtn" />
	</div>
	<div id="bottom">
		<img src="static/img/ico_hand.png" alt="">
		<span id="handNum">赞</span>
		<img src="static/img/ico_heat.png" alt="">
		<span>收藏</span>
		<img src="static/img/ico_chat.png" alt="">
		<span id="chatNum">评论</span>		
	</div>	
</div>
<div id="footerbar">
	<img src="static/img/logo_txt.png" alt="" />
	<p>打开</p>
</div>
<script src="https://static.mlinks.cc/scripts/dist/mlink.min.js"></script>
<script>
    var center = [116.4, 39.9];
    var fpUrl = '';
    fpUrl = location.href;
    var fpPram = getQueryString("fp_id");
	var uidPram = getQueryString("uid");
    fpUrl = fpUrl.split('?')[0].substr(0,fpUrl.split('?')[0].length-10);  
	var serverUrl = fpUrl;
	if(serverUrl.indexOf('/testriab') > -1){serverUrl = 'https://testriab.luokuang.com';}
	else if(serverUrl.indexOf('/devriab') > -1){serverUrl = 'https://devriab.luokuang.com';}
	else if(serverUrl.indexOf('/riab') > -1){serverUrl = 'https://riab.luokuang.com';}
	else{serverUrl = 'https://riab.luokuang.com';}	
	console.log(serverUrl);
    initMap();
    function initMap() {
        map = new LK.Map({
            container: 'map',
            style: 'static/data/lkmap_track.json',
            center: center,
            zoom: 10,
            minZoom:2,
            maxZoom:18,
			dragRotate:false
        });
        map.on("load",function () {
            LK.UtilTool.ajax(serverUrl +"/footprint/v1/details?fp_id="+fpPram,{
                success:function (data) {
					if(data && data.code == 0 && data.data){
						data.data.items = data.data.items.sort(function(a,b){
							return b.insert_time - a.insert_time;
						});
						if(data.data.source_icon){
							document.getElementById('userIcon').setAttribute('src',data.data.source_icon);
						}else{
							document.getElementById('userIcon').setAttribute('src',"https://img-ugc-yt.luokuang.com/1544671983732.png");
						}
						document.getElementById('userIcon').style.display = 'block';
						var cc_count = data.data.cc_count;
						var up_count = data.data.up_count;
						if(up_count > 0) document.getElementById('handNum').innerHTML = up_count;
						if(cc_count > 0) document.getElementById('handNum').innerHTML = cc_count;
						var trackManager = new LK.TrackManager(map,{
							trackContentClick:function (contents,trackData) {
								console.log(contents[0]._data.iid);
								location.href = serverUrl+'/view/lk_share/index.html#/' + fpPram + '/' + contents[0]._data.iid;
							}
						});
						if(data.data.status == 4 || data.data.status == 5 || data.data.status == 6 || data.data.status == 9){
							window.location.href = serverUrl+"/view/h5/v1/LUOKUANGOS/article/"+fpPram+"?is_html=1&plt=ios&content=json&share=shares"
						}else{
							showMap();
							trackManager.setTrackData(data.data)
						}						
					}
                }
            })
        })
    }
	
	function showMap() {
		var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var zoomRate = clientWidth/750;
		//top
		var sideBar = document.getElementById("sidebar");
		sideBar.style.bottom = 227 * zoomRate +'px';
		
		sideBar.style.right = 20 * zoomRate +'px';
		var sideTopBar = document.getElementById("top");
		sideTopBar.style.width = 88 * zoomRate + 'px';
		sideTopBar.style.height = 240 * zoomRate + 'px';
		sideTopBar.getElementsByTagName('img')[0].style.paddingTop = 14 * zoomRate +'px';
		sideTopBar.getElementsByTagName('img')[1].style.paddingTop = 22 * zoomRate +'px';
		//user
		var sideUser = document.getElementById("user");
		sideUser.style.width = sideUser.style.height =88 * zoomRate + 'px';
		sideUser.style.marginTop = 20 * zoomRate + 'px';
		sideUser.style.marginBottom = 26 * zoomRate + 'px';
		var addBtn = document.getElementById("addbtn");
		addBtn.style.width = addBtn.style.height = 36*zoomRate + 'px';
		addBtn.style.bottom = -(36*zoomRate)/2 + 'px'
		//bottom
		var sideBottomBar = document.getElementById("bottom");
		sideBottomBar.style.width = 88 * zoomRate + 'px';
		sideBottomBar.style.height = 352 * zoomRate + 'px';
		sideBottomBar.getElementsByTagName('img')[0].style.paddingTop = 20 * zoomRate +'px';
		sideBottomBar.getElementsByTagName('img')[1].style.paddingTop = 20 * zoomRate +'px';
		sideBottomBar.getElementsByTagName('img')[2].style.paddingTop = 20 * zoomRate +'px';
		var spanObj = sideBar.getElementsByTagName('span');
		for(var i=0;i<spanObj.length;i++){
			sideBar.getElementsByTagName('span')[i].style.fontSize = 22 * zoomRate +'px';
		}
		sideBar.style.display = 'block';
		var footerBar = document.getElementById("footerbar");
		footerBar.style.height = 108 * zoomRate +'px';
		var oFooterBar = footerBar.getElementsByTagName('p')[0];
		var iFooterBar = footerBar.getElementsByTagName('img')[0];
		oFooterBar.style.fontSize = 30 * zoomRate +'px';
		oFooterBar.style.width = 130 * zoomRate +'px';
		oFooterBar.style.height = 60 * zoomRate +'px';
		oFooterBar.style.marginTop = 24 * zoomRate +'px';
		oFooterBar.style.marginRight = 30 * zoomRate +'px';
		iFooterBar.style.width = 336 * zoomRate +'px';
		iFooterBar.style.heiht = 80 * zoomRate +'px';
		iFooterBar.style.marginTop = 14 * zoomRate +'px';
		iFooterBar.style.marginLeft = 30 * zoomRate +'px';
		footerBar.style.display = 'block';


		var bgsss = setInterval(function() {
			 if(sideBar && footerBar) {
					 clearInterval(bgsss);
					 new Mlink({
								mlink:"https://ah8bom.mlinks.cc/ABiM?fp_id="+fpPram+"&uid=" +uidPram,//短链地址
								button: sideBar
						});
					 new Mlink({
								mlink:"https://ah8bom.mlinks.cc/ABiM?fp_id="+fpPram+"&uid=" +uidPram,//短链地址
								button: footerBar
						});						
			 }
		}, 200)				
		
	}
	function getQueryString(name) { 
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
		var r = window.location.search.substr(1).match(reg); 
		if (r != null) return unescape(r[2]); return null; 
	} 
</script>
</body>
</html>